<template>
  <div class="search">
    <header>
      <Icon type="ios-arrow-back" size="34" @click="back()" />
      <h1 @click="jump_index()">干货集中营</h1>
      <p>每日分享妹子图 和 技术干货，还有供大家中午休息的休闲视频</p>
      <img src="../images/work.png" alt />
    </header>
    <main>
      <div>
        <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
          <h2>
            搜索 「
            <span>{{keyword}}</span> 」 的结果
          </h2>
          <div class="item" v-for="(item,index) in dataList" :key="index">
            <a :href="item.url">
              <p>
                <span>{{index+1}}.</span>
                <span>{{item.desc}}</span>
              </p>
              <div>
                <Tag color="blue">
                  <Time :time="item.publishedAt" />
                </Tag>
                <Tag color="gold">{{item.type}}</Tag>
                <Tag color="gold">{{item.who}}</Tag>
              </div>
            </a>
          </div>
        </mescroll-vue>
      </div>
      <div id="empty_box"></div>
    </main>
  </div>
</template>
<script>
const MescrollVue = () => import("mescroll.js/mescroll.vue");
export default {
  components: {
    MescrollVue // 注册mescroll组件
  },
  data() {
    return {
      keyword: this.$route.query.keyword,
      range: "all",
      mescroll: null, // mescroll实例对象
      mescrollDown: {}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
        //以下是一些常用的配置,当然不写也可以的.
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 20 //每页数据条数,默认10
        },
        htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
        noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据; 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看 这就是为什么无更多数据有时候不显示的原因
        toTop: {
          //回到顶部按钮
          src: require("../images/topup.png"), //图片路径,默认null,支持网络图
          offset: 1000 //列表滚动1000px才显示回到顶部按钮
        },
        empty: {
          //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
          warpId: "empty_box", //父布局的id (1.3.5版本支持传入dom元素)
          icon: require("../images/null.png"), //图标,默认null,支持网络图
          tip: "暂无相关数据~" //提示
        }
      },
      dataList: [] // 列表数据
    };
  },
  methods: {
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      var scroll = scrollTop - this.i;
      this.i = scrollTop;
      if (scroll < 0) {
        console.log("up");
      } else {
        console.log("down");
      }
    },
    jump_index() {
      this.$router.push("/index");
    },
    back() {
      this.$route.meta.keepAlive = false;
      this.$router.go(-1);
    },
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page, mescroll) {
      // 联网请求
      let url =
        "/search/query/" +
        this.keyword +
        "/category/" +
        this.range +
        "/count/" +
        this.mescrollUp.page.size +
        "/page/" +
        this.mescrollUp.page.num;
      axios
        .get(url)
        .then(response => {
          // 请求的列表数据
          let arr = response.data.results;
          // 如果是第一页需手动置空列表
          if (page.num === 1) this.dataList = [];
          // 把请求到的数据添加到列表
          this.dataList = this.dataList.concat(arr);

          // 数据渲染成功后,隐藏下拉刷新的状态
          this.$nextTick(() => {
            mescroll.endSuccess(arr.length);
          });
        })
        .catch(e => {
          // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
          mescroll.endErr();
        });
    }
  },
  beforeRouteEnter(to, from, next) {
    // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
    next(vm => {
      // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
      vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter(); // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
    });
  },
  beforeRouteLeave(to, from, next) {
    // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
    // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteLeave方法
    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave(); // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
    next();
  }
};
</script>

<style>
#empty_box {
  width: 3rem;
  height: 3rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding-top: 1rem;
  z-index: -1;
}
#empty_box img {
  width: 1rem;
  margin: auto;
}
</style>

<style lang="scss" scoped>
.search {
  .ivu-icon{
    position: absolute;
  }
  .mescroll {
    position: fixed;
    top: 2.5rem;
    left: 0;
    bottom: 0;
    height: auto;
  }
  header {
    width: 100%;
    padding: 0.1rem 0;
    background: url(../images/bg.png);
    h1 {
      font-size: 0.46rem;
      color: #444;
      font-weight: normal;
      text-align: center;
      line-height: 0.68rem;
    }
    p {
      width: 80%;
      text-align: center;
      font-size: 0.26rem;
      color: #444;
      margin: auto;
      line-height: 0.4rem;
    }
    img {
      width: 40%;
      margin: auto;
    }
  }
  main {
    padding: 0.3rem;
    h2 {
      text-align: center;
      font-size: 0.4rem;
      font-weight: normal;
      color: #555;
      line-height: 0.6rem;
    }
    > div {
      .item {
        padding: 0.1rem;
        a {
          > p {
            padding: 0.1rem;
            span {
              font-size: 0.3rem;
            }
            span:first-child {
              color: #444;
            }
          }
          > div {
            text-align: right;
          }
        }
      }
    }
  }
}
</style>